<template>
  <div>
    <!--引用表格-->
    <BasicTable bordered size="middle" :loading="loading" rowKey="id" :canResize="false" :columns="labItemsColumns"
      :dataSource="dataSource" :pagination="false">
      <!--操作栏-->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'itemStatus'">
          <span>
            <a-tag
              :color="record.itemStatus === '待分配' ? 'volcano' : record.itemStatus === '待实验' ? 'geekblue' : 'green'">
              {{ record.itemStatus }}
            </a-tag>
          </span>
        </template>
        <template v-if="column.key === 'userName'">
          <div v-if="record.itemStatus === '待实验'">
            <span class="checkAduit" v-if="record.userName" @click="handleUserBut(record)">{{ record.userName}}</span>
          </div>
          <div v-else>
            {{ record.userName }}
          </div>
        </template>
      </template>
      <template #htmlSlot="{ text }">
        <div v-html="text"></div>
      </template>
      <template #fileSlot="{ text }">
        <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small"
          @click="downloadFile(text)">下载</a-button>
      </template>
    </BasicTable>
  </div>
  <LabEntrustItemModal @register="registerItemModal" @success="handSuccess"></LabEntrustItemModal>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue';
import { BasicTable } from '/@/components/Table';
import { labItemsColumns } from '../LabEntrustAllotList.data';
import { queryItemsById } from '../LabEntrustAllotList.api';
import LabEntrustItemModal from '../LabEntrustItemModal.vue';
import { useModal } from '/@/components/Modal';
const props = defineProps({
  id: {
    type: String,
    default: '',
  },
});

const loading = ref(false);
const dataSource = ref([]);



const [registerItemModal, { openModal }] = useModal();
watchEffect(() => {
  props.id && loadData(props.id);
});

function loadData(id) {
  dataSource.value = [];
  loading.value = true;
  queryItemsById({ id })
    .then((res) => {
      if (res.success) {
        dataSource.value = res.result.records;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}


function handleUserBut(record) {
  openModal(true, {
    record
  });
}

function handSuccess() {
  loadData(props.id);
  }
</script>
<style>
@media print {
  .hidden {
    display: none;
  }

  @page {
    size: auto;
    /* auto is the initial value */
    margin: 0mm 0mm 0mm 0mm;
    /* this affects the margin in the printer settings */
  }
}

.checkAduit {
  color: #009688;
  cursor: pointer;
}
</style>
